<template>
	<div class="achievement-center-page2 achievement-center">
		<!-- 顶部标题 -->
		<!-- <div class="center-title">
        <span>成果聚合中心</span>
      </div> -->

		<!-- 中心动画区域 -->
		<div class="center-animation">
			<!-- 主背景图 -->
			<img
				class="main-background"
				src="../../images/dizuo.png"
				alt="主背景"
			/>
             <img class="light-effect" src="../../images/light.png" alt="光效" />
            <div class="page-title">
                运营总体情况
            </div>
            <div class="card-list">
                <div class="card-left">
                    <div class="card-item card-item-1">
                        <img src="../../images/ico-YYQK-center.png" alt="">
                        <p>运营子项目名称</p>
                    </div>
                    <div class="card-item card-item-2 card-active">
                        <img src="../../images/ico-YYQK-center.png" alt="">
                        <p>运营子项目名称</p>
                    </div>
                    <div class="card-item card-item-3">
                        <img src="../../images/ico-YYQK-center.png" alt="">
                        <p>运营子项目名称</p>
                    </div>
                </div>
                <div class="card-right">
                    <div class="card-item card-item-4">
                        <p>运营子项目名称</p>
                        <img src="../../images/ico-YYQK-center.png" alt="">
                    </div>
                    <div class="card-item card-item-5">
                        <p>运营子项目名称</p>
                        <img src="../../images/ico-YYQK-center.png" alt="">
                    </div>
                    <div class="card-item card-item-6">
                        <p>运营子项目名称</p>
                        <img src="../../images/ico-YYQK-center.png" alt="">
                    </div>
                </div>
            </div>
		</div>
	</div>
</template>
  
  <script>
export default {
	name: "Page3Centet",
	props: {
		companiesData: {
			type: Array,
			required: true,
			default: () => [],
		},
	},
	data() {
		return {
			// 保持原有的props接口，但不再使用
		};
	},
	mounted() {
		// 组件挂载后可以添加一些初始化逻辑
	},
	beforeDestroy() {
		// 清理资源
	},
	methods: {
		initChart() {
			// 保持与其他组件的API兼容性
			// 新组件不需要图表初始化，但需要这个方法避免父组件报错
		},
	},
};
</script>
  
  <style lang="scss" scoped>
.achievement-center-page2 {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	--scale: 0.9;

	.center-title {
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;

		span {
			font-size: 32px;
			font-weight: bold;
			color: #ffffff;
			text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
			background: linear-gradient(90deg, #00ffff, #66ccff, #00ffff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
	}
    .center-animation{
        margin-top: 150px;
        position: relative;
        height: 100%;
		transform: translateY(-10%) scale(var(--scale));
		transform-origin: center center;
        .page-title{
            position: absolute;
            top: 250px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            font-size: 60px;
            font-weight: bold;
            color: #fff;
        }
        .main-background{
            width: 100%;
            height: 100%;
            // margin-left: 10%;
        }
        .card-list{
            .card-left{
                transform: translateY(-10%) scale(var(--scale));
                transform-origin: center center;
                position: absolute;
                left: -80px;
                top: 100px;
                .card-item{
                    height: 110px;
                    width: 500px;
                    display: flex;
                    align-items: center;
                    background: url('../../images/blue-icon-new.png') no-repeat center center;
                    background-size: 100% 100%;
                    >img{
                        width: 70px;
                        height: 50px;
                        margin-left: 60px;
                        transform: translateY(-10px);
                    }
                    p{
                        font-size: 30px;
                        line-height: 40px;
                        color: #fff;
                        font-weight: bold;
                        margin-left: 80px;
                    }
                    &.card-item-1{
                        margin-left: 50px;
                    }
                    &.card-item-2{
                        margin-top: 100px;
                    }
                    &.card-item-3{
                        margin-left: 100px;
                        margin-top: 100px;
                    }
                    &.card-active{
                        background-image: url('../../images/green-icon-new.png');

                    }
                }
            }
            .card-right{
                transform: translateY(-10%) scale(var(--scale));
                transform-origin: center center;
                position: absolute;
                right: -80px;
                top: 100px;
                .card-item{
                    height: 110px;
                    width: 500px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                        background: url('../../images/blue-icon-new2.png') no-repeat center center;
                        background-size: 100% 100%;
                    >img{
                        width: 70px;
                        height: 50px;
                        margin-right: 60px;
                        transform: translateY(-10px);
                    }
                    p{
                        font-size: 30px;
                        line-height: 40px;
                        color: #fff;
                        font-weight: bold;
                        margin-right: 80px;
                    }
                    &.card-item-4{
                        margin-left: 100px;
                    }
                    &.card-item-5{
                        margin-top: 100px;
                        margin-left: 150px;
                    }
                    &.card-item-6{
                        margin-left: 50px;
                        margin-top: 100px;
                    }
                    &.card-active{
                        background-image: url('../../images/green-icon-new2.png');
                    }
                }
            }
        }
    }

}
.achievement-center {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
  .center-animation {
    
    .light-effect {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 60%;
      object-fit: contain;
		z-index: 2;
      animation: lightPulse 3s ease-in-out infinite;
    }
    
    .ai-robot {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 400px;
      object-fit: contain;
      z-index: 4;
      animation: robotFloat 4s ease-in-out infinite;
    }
    
    .center-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      object-fit: contain;
      z-index: 3;
      margin-top: -80px;
    }
    
    .floating-logo {
		position: absolute;
      width: 160px;
      height: 160px;
      object-fit: contain;
		z-index: 1003;
		
      &.nanrui-logo {
        top: 38%;
        left: 33%;
        animation: floatAnimation1 3s infinite ease-in-out;
      }
      
      &.xidian-logo {
        top: 48%;
        left: 46%;
        animation: floatAnimation2 2.5s infinite ease-in-out;
      }
      
      &.qinghua-logo {
        top: 28%;
        left: 58%;
        animation: floatAnimation3 3.5s infinite ease-in-out;
      }
    }
	}
}
// 动画效果
@keyframes lightPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes robotFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

@keyframes floatAnimation1 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-28px);
  }
}

@keyframes floatAnimation2 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-26px);
  }
}

@keyframes floatAnimation3 {
	0%, 100% {
    transform: translateY(0px);
	}
	50% {
    transform: translateY(-20px);
	}
}

@keyframes rotateModules {
	0% {
    transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes keepTextUpright {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(-360deg);
  }
}

@keyframes rotateModules {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

// 原来的椭圆轨迹动画实现
@keyframes animX {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}

@keyframes animY {
  0% {
    top: 20%;
  }
  100% {
    top: 80%;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    opacity: 0.6;
  }
}
</style>